import React from 'react';
import { View, Text, ScrollView, StyleSheet, Image } from 'react-native';
// import Icon from 'react-native-vector-icons/Ionicons';
import '../../common/global';

const data = [
    { image: require('../../Image/list1.png'), text: '雨吟春雷' },
    { image: require('../../Image/list1_1.png'), text: '轻海舒缓' },
    { image: require('../../Image/list1_2.png'), text: '沙漠午憩' },
    { image: require('../../Image/list1_3.png'), text: '清风深睡' },
    { image: require('../../Image/list1_4.png'), text: '浮云朝露' },
]
const data1=[
    { image: require('../../Image/list1.png'), text: '雨吟春雷' },
    { image: require('../../Image/list1_1.png'), text: '轻海舒缓' },
    { image: require('../../Image/list1_2.png'), text: '沙漠午憩' },
    { image: require('../../Image/list1_3.png'), text: '清风深睡' },
    { image: require('../../Image/list1_4.png'), text: '浮云朝露' },
]

const List = () => {
    return (
        <ScrollView style={styles.container}>
            <View style={styles.headerStyle}>
                <View style={styles.headerShow}></View>
            </View>
            <View style={styles.listShow}>
                <View style={styles.show1}>
                    <View style={styles.title}><Text style={{fontSize:20,marginLeft:ptd(20)}}>选个合适的解压歌单吧</Text></View>
                    <ScrollView horizontal={true} style={{height:ptd(300)}}>
                        {
                            data.map((item, idx) => {
                                return (
                                    <View key={idx} style={styles.itemStyle}>
                                        <View style={styles.imgStyle}><Image source={item.image} imageStyle={{borderRadius:25}} resizeMode='cover'></Image></View>
                                        <View><Text>{item.text}</Text></View>
                                    </View>
                                )
                            })
                        }
                    </ScrollView>

                </View>
                <View style={styles.show2}>
                    <View style={styles.title}><Text style={{fontSize:20,marginLeft:ptd(20)}}>朋友们的佳作</Text></View>
                </View>
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        marginTop: ptd(20),
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
    },
    headerStyle: {
        height: ptd(38),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    headerShow: {
        width: '28%',
        height: '10%',
        backgroundColor: 'rgb(233,233,235)',
        borderRadius: 50
    },
    listShow: {
        marginTop:ptd(10),
        marginBottom:ptd(30)
    },
    title:{
        justifyContent:'center',
        height:ptd(40),
    },
    itemStyle:{
        width:ptd(160),
        height:ptd(),
        marginLeft:ptd(20),
        marginRight:ptd(20),
        overflow:'hidden',
        borderRadius:25
    },
    imgStyle:{
        width:ptd(160),
        height:ptd(150),
    }
})

export default List;